<template>
  <div class="relative h-full text-[12px] !text-label-normal">
    <a-spin :spinning="loading">
      <div class="flex items-center !text-[16px] mb-[23px]">
        <span class="flex-shrink-0">选择批处理模板</span>
        <!-- <CloudUploadOutlined class="text-[18px] ml-[10px]" @click="upload" /> -->
        <!-- <input @change="chooseTemplate" ref="templateUploadRef" type="file" class="invisible" /> -->
      </div>
      <a-select v-model:value="templateId" style="width: 100%">
        <a-select-option v-for="temp of allTemplates.templates" :key="temp" :value="temp">{{ temp }}</a-select-option>
      </a-select>
      <div class="flex items-center !text-[16px] mt-[40px] mb-[23px]">
        <span class="flex-shrink-0">创建批处理</span>
        <!-- <CloudUploadOutlined class="text-[18px] ml-[10px]" @click="uploadFile" />
        <input @change="chooseFile" ref="fileUploadRef" type="file" class="invisible" /> -->
      </div>
      <a-input class="" v-model:value="new_batch" />
    </a-spin>
    <DrawerButton class="absolute bottom-0 right-0" ok-text="确定" @cancel="onClose" @ok="addBatch" />
  </div>
</template>
<script setup lang="ts">
// import { CloudUploadOutlined } from '@ant-design/icons-vue';
import { apiAddBatch, apiGetAllBatchTemplates } from '@/http/api/controller_status';
import { message } from 'ant-design-vue';
const emit = defineEmits<{ (event: 'dismiss'): void }>();
const loading = ref(false);
// const filePath = ref('');
const allTemplates = ref<{ templates: string[]; use_template: string }>({ templates: [], use_template: '' });
const templateId = ref('');
// const templateUploadRef = ref();
// const fileUploadRef = ref();
const new_batch = ref('');
const onClose = () => {
  templateId.value = '';
  new_batch.value = '';
  emit('dismiss');
};
// const upload = () => {
//   if (templateUploadRef.value) {
//     templateUploadRef.value.click();
//   }
// };
// const uploadFile = () => {
//   if (fileUploadRef.value) {
//     fileUploadRef.value.click();
//   }
// };
// const chooseTemplate = (e: any) => {
//   filePath.value = e.target.value;
// };
// const chooseFile = (e: any) => {
//   fileName.value = e.target.value;
// };
const addBatch = async () => {
  if (!templateId.value) {
    message.error('请先选择模板');
    return;
  }
  if (!new_batch.value) {
    message.error('请填入创建批处理的名字');
    return;
  }
  try {
    if (loading.value) return;
    loading.value = true;
    const res = await apiAddBatch({ template: templateId.value, new_batch: new_batch.value });
    message.success(res.msg);
    emit('dismiss');
  } catch (error) {
    message.error((error as any).msg);
  } finally {
    loading.value = false;
  }
};
const getBatchTemplate = async () => {
  try {
    const res = await apiGetAllBatchTemplates();
    allTemplates.value = res.data;
    templateId.value = res.data.use_template;
  } catch (error) {}
};

onBeforeMount(() => {
  getBatchTemplate();
});
</script>
<style lang="scss" scoped></style>
